<template>
  <div>
    <el-descriptions class="VirtualCheck" :column="2" border :labelStyle='{width:"220px"}' :contentStyle='{width:"259px"}'>
      <el-descriptions-item>
        <template slot="label">{{$t('接口名称')}}</template>
        <div>{{form.strSubinterfaceName}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('接口别名')}}</template>
        <div>{{form.cDevOtherName}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('MTU')}}</template>
        <div>{{form.iMtu}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('主接口名称')}}</template>
        <div>{{form.strPhysicsName}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('链路状态')}}</template>
        <div>{{form.bLinkStatus === 0 ? 'down':'up'}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('状态')}}</template>
        <div>{{form.bPortStatus === 'up' ? $t('开启'):$t('关闭')}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('模式')}}</template>
        <div v-if="form.enPortMode===0">{{$t('路由模式')}}</div>
        <div v-else>{{$t('透明模式')}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">{{$t('VLAN Tag')}}</template>
        <div>{{form.vlanTag}}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.enPortMode===1">
        <template slot="label">{{$t('Access VLAN ID')}}</template>
        <div>{{form.iVlanId}}</div>
      </el-descriptions-item>
    </el-descriptions>

    <div v-if="form.enPortMode === 0" style="margin-top:20px;display: inline-flex;align-items: flex-start;justify-content: space-around;width: 100%;">
      <el-table size='mini' :data="form.ipv4" stripe border style="width:470px;margin-right:20px;">
        <el-table-column prop='cPortIpv4' label="IPv4">
          <template slot-scope="scope">
            <tooltip :html="scope.row.cPortIpv4" :content="scope.row.cPortIpv4" class="wid190" :refName="scope.row.cPortIpv4">
            </tooltip>
          </template>
        </el-table-column>
        <el-table-column prop='cPortNetmask' :label="$t('子网掩码')">
          <template slot-scope="scope">
            <tooltip :html="scope.row.cPortNetmask" :content="scope.row.cPortNetmask" class="wid190" :refName="scope.row.cPortNetmask">
            </tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-table size='mini' :data="form.ipv6" stripe border style="width:470px;">
        <el-table-column prop='cPortIpv6' label="IPv6">
          <template slot-scope="scope">
            <tooltip :html="scope.row.cPortIpv6" :content="scope.row.cPortIpv6" class="wid190" :refName="scope.row.cPortIpv6">
            </tooltip>
          </template>
        </el-table-column>
        <el-table-column prop='cDevIpv6Prefix' :label="$t('前缀')">
          <template slot-scope="scope">
            <tooltip :html="scope.row.cDevIpv6Prefix" :content="scope.row.cDevIpv6Prefix" class="wid190" :refName="scope.row.cDevIpv6Prefix">
            </tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
export default {
  props: [
    'edit_form'
  ],
  name: 'VirtualShow',
  data () {
    return {
      form: {
        BondId: 0,
        InBandwidthUnit: '',
        InOverloadUnit: '',
        OutOverloadUnit: '',
        OutbandwidthUnit: '',
        bDuplexFlag: '',
        bDuplexFlagState: '',
        bLinkStatus: 0,
        bNegotiateFlag: '',
        bPortStatus: '',
        bandwidth: 0,
        bandwidthState: '',
        cDevOtherName: '',
        cMAC: '',
        cPortIpv4Gateway: '',
        cPortIpv6Gateway: '',
        ePortOrlPort: '',
        enPortMode: 0,
        enPortType: 0,
        force_autoneg: false,
        iMtu: 0,
        iOutbandwidth: 0,
        ipv4: [],
        ipv6: [],
        speed_list: [],
        strPhysicsName: ''
      }
    }
  },
  watch: {
    edit_form: {
      handler (val) {
        this.form = val
      },
      immediate: true
    }
  },
  methods: {
    containPortShow (data) {
     return data.map(item=> item.strPhysicsName).join(",");
    }
  }
}
</script>
